<template>
  <div class="warp">
    <h1>{{title}}</h1>
    <!-- slot 插槽标签 -->
    <!-- vue规定:每一个slot插槽,都要有一个name名称,如果没有书写,则默认name的值是default -->
    <slot></slot>

    <div>
        <!-- 如果当前的slot没有被传递内容,则展示slot标签中的默认内容 -->
        <slot name='footer'>我是底部</slot>
    </div>
  </div>
</template>

<script>
export default {
    name:'Tab',
    props:['id','title','list']
}
</script>

<style scoped>
    .warp{
        width: 230px;
        height: 340px;
        background-color: aqua;
    }

    .warp h1{
        background-color: blue;
    }
</style>